<template>
	<view style="padding-bottom: 140rpx;">
		<u-navbar leftIcon="" :title="returnTitle" placeholder>
			<view class="flexright" slot="left">
				<view class="jiazongbtn" @click="jumpurl('/pages/workbench/jiazongjz')" v-show="headerTabActive==0 && pos_show">
					<view class="">快速結帳</view>
				</view>
			</view>
			<view class="flexright" slot="right">
				<view class="" v-show="headerTabActive==0 && pos_show">
					<!-- <image class="posdcimg" src="@/static/image/system/posdc.png" mode="" @click="posFn"></image> -->
					<view class="jiazongbtn" @click="posFn">
						<view class="">畫面結帳</view>
					</view>
				</view>
			</view>
			<view class="flexright xiaohui" slot="right">
				<view class="" v-show="headerTabActive==1" @click="newCallorder">
					新增訂單
				</view>
			</view>
			<view class="flexright xiaohui" slot="right">
				<view class="" v-show="headerTabActive==2 && ishave_zt" @click="jumpurl('/pages/workbench/zhuotaigl')">
					查看使用
				</view>
			</view>
		</u-navbar>
		<view class="mainpadding ffffff">
			<view class="headerBox  flexbetween">
				<view style="position: relative;" :class="headerTabActive==index?'select':'noselect'"
					v-for="(item,index) in headerTab" :key="index" @click="selectTab(index)" v-if="returnOrderlxshow(index)">
					<view class="box flexleft" v-if="index==0">
						<u-badge max="99" :value="ordergoods_total_num"></u-badge>
					</view>
					<!-- 買賣沒有呼叫訂單 -->
					<view class="box flexleft" v-if="index==1">
						<u-badge max="99" :value="ordercall_total_num"></u-badge>
					</view>
					<view class="box flexleft" v-if="index==2 && yystatus==1">
						<u-badge max="99" :value="ordermake_total_num"></u-badge>
					</view>
					<view class="box flexleft" v-if="index==2 && yystatus==2">
						<u-badge max="99" :value="total_hotelorder_num"></u-badge>
					</view>
					<view class="box flexleft" v-if="index==3">
						<u-badge max="99" :value="total_hotelorder_num"></u-badge>
					</view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 商品訂單 -->
		<view v-show="headerTabActive==0">
			<goodsorderzj ref="goodsorderref" @zjchange="init()"></goodsorderzj>
		</view>
		<!-- 呼叫訂單 -->
		<view v-show="headerTabActive==1">
			<callorderzj ref="callorderzjref" @zjchange="init()"></callorderzj>
		</view>
		<!-- 預約訂單 -->
		<view v-show="headerTabActive==2">
			<yuyueorderzj ref="yuyueorderzjref" @zjchange="init()"></yuyueorderzj>
		</view>
		<!-- uber訂單 -->
		<view v-show="headerTabActive==3">
			<uberorderzj ref="uberorderzjref" @zjchange="init()"></uberorderzj>
		</view>
		<tabbar ref="tabbarref" :current="0"></tabbar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pos_style: 1, //1pos畫面，2列表畫面
				pos_show: false,
				headerTab: [{
						name: "商品"
					},
					{
						name: "呼叫"
					},
					{
						name: "預約"
					}, 
					{
						name: "外送"
					}
				],
				headerTabActive: 0, //當前tab頁，0商品，1呼叫，2預約，3外送
				ordergoods_total_num: 0, //商品訂單總數量
				ordercall_total_num: 0, //呼叫訂單總數量
				ordermake_total_num: 0, //預約訂單總數量
				total_hotelorder_num: 0, //酒店訂單總數量
				ishave_zt: true, //是否有使用，
				yystatus: 1, //1預約，2住宿
				shopInfo:{},
				hy_type: "", //0買賣,1計時，3住宿露营，5工程，6超商
			}
		},
		computed: {
			returnTitle() {
				if (this.headerTabActive == 0) {
					return "商品訂單"
				}
				if (this.headerTabActive == 1) {
					return "呼叫訂單"
				}
				if (this.headerTabActive == 2) {
					return "預約訂單"
				}
				if (this.headerTabActive == 3) {
					return "外送訂單"
				}
			}
		},
		onLoad() {
			uni.$on("workscancomplete", data => { //扫码完成
				if (this.headerTabActive == 0) {
					this.$refs.goodsorderref.page = 1
					this.$refs.goodsorderref.componentInit();
					this.init();
				}
			})
			uni.hideTabBar()
		},
		onUnload() {
			uni.$off("workscancomplete")
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.tabbarref.init()
				if (this.headerTabActive == 0) { //當前頁商品訂單
					this.$refs.goodsorderref.page = 1
					this.$refs.goodsorderref.componentInit()
				}
				if (this.headerTabActive == 1) { //當前頁呼叫訂單
					this.$refs.callorderzjref.page = 1
					this.$refs.callorderzjref.componentInit()
				}
			});
			this.getInfo()
			this.getztList()
			this.hy_type = uni.getStorageSync('hy_type')
		},
		methods: {
			returnOrderlxshow(index){
				if(index==1 && this.hy_type==0){
					return false
				}
				return true
			},
			newCallorder(){
				this.http.modal('提示', "是否確認創建呼叫訂單", true, (resp) => {
					if(resp){
						this.http.request("/api/Ordercall/createOrder", "GET", {
							shop_id: uni.getStorageSync("shop_id"),
						}).then(res => {
							uni.setStorageSync("order_call_id", res.data.id)
							uni.navigateTo({
								url: "/pages/callOutOrder/xuanzefw?type=1&shopcreatehj=1"
							})
						})
					}
				})
			},
			posFn() {
				if (this.pos_style == 1) {
					uni.navigateTo({
						url: "/pages/workbench/newpos"
					})
				} else {
					uni.navigateTo({
						url:"/pages/workbench/tianjiakhxx"
					})
					
				}
			},
			init() {
				this.$refs.tabbarref.init()
				this.http.request("/api/shop/orderData", "GET", {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					this.ordergoods_total_num = res.data.total_ordergoods_num
					this.ordercall_total_num = res.data.total_ordercall_num
					this.ordermake_total_num = res.data.total_ordermake_num
					this.total_hotelorder_num = res.data.total_hotelorder_num
				})
			},
			selectTab(index) { //一级tab切換
				this.headerTabActive = index
				this.$nextTick(() => {
					if (this.headerTabActive == 0) { //當前頁商品訂單
						this.$refs.goodsorderref.componentInit()
					}
					if (this.headerTabActive == 1) { //當前頁呼叫訂單
						this.$refs.callorderzjref.componentInit()
					}
					if (this.headerTabActive == 2) { //當前頁預約訂單
						this.$refs.yuyueorderzjref.componentInit()
					}
					if (this.headerTabActive == 3) { //當前頁預約訂單
						this.$refs.uberorderzjref.componentInit()
					}
				});
			},
			getInfo() {
				this.http.request("/api/shop/Shopdeail", "POST", {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					uni.setStorageSync("appkey", res.data.appkey)
					uni.setStorageSync("is_sdkfp", res.data.is_sdkfp)
					uni.setStorageSync("is_call_sdkfp", res.data.is_call_sdkfp)
					uni.setStorageSync("is_pos_sdkfp", res.data.is_pos_sdkfp)
					uni.setStorageSync("hy_type", res.data.hy_type)
					uni.setStorageSync("opentable_status", res.data.opentable_status)
					uni.setStorageSync("houtel_type", res.data.houtel_type)
					if (res.data.is_ny == 0 && res.data.is_zq == 0) {
						this.pos_show = false
					} else {
						this.pos_show = true
					}
					if (res.data.hy_type == 3 || res.data.hy_type == 7) {
						this.$refs.yuyueorderzjref.yystatus = 2
						this.yystatus = 2
					} else {
						this.$refs.yuyueorderzjref.yystatus = 1
						this.yystatus = 1
					}
					this.$refs.yuyueorderzjref.list = {
						data: []
					}
					if (this.headerTabActive == 2) { //當前頁預約訂單
						this.$refs.yuyueorderzjref.componentInit()
					}
					this.pos_style = res.data.pos_style //pos_style=1pos畫面，2列表畫面
					this.shopInfo = res.data
				})
			},
			onReachBottom() {
				if (this.headerTabActive == 0) { //當前頁商品訂單
					this.$refs.goodsorderref.onReachBottomZj()
				}
				if (this.headerTabActive == 1) { //當前頁呼叫訂單
					this.$refs.callorderzjref.onReachBottomZj()
				}
				if (this.headerTabActive == 2) { //當前頁預約訂單
					this.$refs.yuyueorderzjref.onReachBottomZj()
				}
				if (this.headerTabActive == 3) { //當前頁預約訂單
					this.$refs.uberorderzjref.onReachBottomZj()
				}

			},
			async getztList() { //使用列表
				let _this = this
				let res = await this.http.request('/api/shop/listtable', 'POST', {
					shop_id: uni.getStorageSync("shop_id"), //店鋪id
				})
				if (res.code == 1) {
					if (res.data.length == 0) {
						this.ishave_zt = false
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.jiazongbtn{
		border: 2rpx solid #000;
		font-size: 34rpx;
		font-weight: 800;
		background-color: #fff100;
		border-radius: 100rpx;
		padding: 5rpx 30rpx;
	}
	::v-deep.u-badge {
		// width: 15rpx !important;
	}

	.box {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
	}

	::v-deep.u-transition {
		z-index: 10 !important;
	}

	::v-deep.u-sticky {
		z-index: 5 !important;
	}

	.header {
		box-sizing: border-box;
	}

	.headerBox {
		padding: 6rpx;
		box-sizing: border-box;
		background: #F1F1F1;
		border-radius: 72rpx 72rpx 72rpx 72rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;

		view {
			width: 20%;
			text-align: center;
		}

		.select {
			width: 20%;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			background: #ffb800;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.noselect {
			width: 20%;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			background: #f1f1f1;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
		}
	}

	.posdc {
		background: linear-gradient(180deg, #ff9c01 0%, #ffe070 100%);
		color: #333;
		border: 1rpx solid #333;
		font-size: 28rpx;
		padding: 10rpx 15rpx;
		border-radius: 50rpx;
		line-height: 28rpx;
	}

	.posdcimg {
		width: 220rpx;
		height: 60rpx;
	}
</style>